<template>
    <div class="hooks">
        <h2>{{ result }}  {{ sum }}</h2>
        <button @click="multiply">乘十</button>
        <button @click="add">加一</button>
        <br>
        <button @click="GetTalk">增加列表元素</button>
        <h4 v-for="i in TalkArray" >{{ i.content }}</h4>
    </div>
</template>
<script setup lang="ts" name="hooks">
import useAdd from '@/Hooks/useAdd';
import useMultiply from '@/Hooks/useMultiply';
import useTalk from '@/Hooks/useTalk';
const {sum,add}=useAdd();
const {result,multiply}=useMultiply();
const {TalkArray,GetTalk}=useTalk();
</script>
<style scoped>
    .hooks{
        background-color: skyblue;
        border-radius: 10px;
        border: 1px solid black;
        h2{
            text-align: center;
        }
        button{
            justify-items: auto;
        }
        h4{
            display: block;
            margin: 20px auto;
        }
    }
</style>
